import {Button, Divider, Dropdown, Image, MenuProps, message} from "antd";
import {ListItem} from "../model/ListItem.ts";
import React, {useEffect, useState} from "react";
import {PlusOutlined} from "@ant-design/icons";
import {IpcResult} from "../model/IpcResult.ts";

type MenuItem = Required<MenuProps>['items'][number];

const mockedItems: ListItem[] = [
  {
    name: 'item1',
    content: ''
  },
  {
    name: 'item2',
    content: ''
  },
];

export const SiderList = (props: {
  onItemClick: (item: ListItem) => void,
  refresh?: () => void,
}) => {
  const [selectedItem, setSelectedItem] = useState<ListItem>()
  const [listItems, setListItems] = useState<ListItem[]>([])


  const rightMenus: MenuItem[] = [{
    key: 'rename',
    label: '重命名'
  }, {
    key: 'delete',
    label: '删除'
  }, {
    key: 'create',
    label: '新建'
  }, {
    key: 'refresh',
    label: '刷新'
  }]

  useEffect(() => {
    refresh()
  }, []);
  useEffect(() => {
    console.log('.............')
    if (listItems && listItems.length > 0) {
      selectItem(listItems[0])
    }
  }, [listItems]);

  function getIconSrc(item: ListItem) {
    return '/public/unknow.png'
  }

  function refresh() {
    setListItems(mockedItems)
    if (props.refresh) {
      props.refresh()
    }
  }

  function selectItem(script: ListItem) {
    props.onItemClick(script)
    setSelectedItem(script)
  }

  function dealRightItemClick(key: string, item: ListItem) {
    selectItem(item)
    switch (key) {
      case 'delete':
        break;
      case 'rename':
        break;
      case 'create':
        break;
      case 'refresh':
        refresh()
        break;
    }
  }

  function dealResult(res: IpcResult<never>) {
    if (res.success) {
      refresh()
    } else {
      message.error(res.msg)
    }
    return res
  }

  return (
    <div>
      <div style={{textAlign: "center"}}>
        <Button style={{width: '100%', borderRadius: 0}} size={'large'}
                type="text" icon={(<PlusOutlined/>)}>新建
        </Button>
      </div>
      {listItems.map(item => (
        <div style={{textAlign: 'center'}} key={item.name}>
          <Divider orientationMargin={1} style={{margin: 0}}/>
          <Dropdown trigger={['contextMenu']}
                    menu={{
                      items: rightMenus,
                      onClick: (menu: MenuItem) => dealRightItemClick(menu.key, item)
                    }}>
            <Button size={'large'}
                    onClick={() => selectItem(item)}
                    style={{
                      width: '100%',
                      height: 44,
                      textAlign: 'left',
                      borderRadius: 0,
                      backgroundColor: selectedItem?.name === item.name ? '#eaeaea' : ''
                    }}
                    type="text">
              <Image src={getIconSrc(item)} width={22}/>
              <strong style={{marginLeft: 8}}>{item.name}</strong>
            </Button>
          </Dropdown>
        </div>
      ))}
    </div>
  )
}